<template>
	<div>
    <button @click="isShow = !isShow">显示/隐藏子组件</button>
    <button @click="changeNumber">改变number</button>
    <p class="number-text">父生命周期 {{  number  }}</p>
    <Child v-if="isShow" v-model:modelValue="number" />
  </div>

</template>
<!-- <script>
import Child from "./components/child.vue";
export default {
	data() {
    return {
      isShow: true,
      number: 100
    }
  },
  components: {
    Child,
  },
	beforeCreate() {
    console.log("父生命周期：beforeCreate");
  },
  setup() {
    console.log("父生命周期：setup");
  },  
	created() {
    console.log("父生命周期：created");
  },
	beforeMount() {
    console.log("父生命周期：beforeMount");
  },
	mounted() {
    console.log("父生命周期：mounted");
  },
	beforeUpdate() {
    console.log("父生命周期：beforeUpdate");
  },
	updated() {
    console.log("父生命周期：updated");
  },
	beforeUnmount() {
    console.log("父生命周期：beforeUnmount");
  },
	unmounted() {
    console.log("父生命周期：unmounted");
  },
  errorCaptured() {
    console.log('子组件抛出了错误！！')
  }
};
</script> -->
<script setup>
  import Child from "./components/child.vue";
  const number = ref(100);
  const isShow = ref(true);
  onBeforeMount(() => {
    console.log("父生命周期：beforeMount");
  });
  onMounted(() => {
    console.log("父生命周期：mounted");
  });
  onBeforeUpdate(() => {
    console.log("父生命周期：beforeUpdate");
  });
  onUpdated(() => {
    console.log("父生命周期：updated");
  });
  onBeforeUnmount(() => {
    console.log("父生命周期：beforeUnmount");
  });
  onUnmounted(() => {
    console.log("父生命周期：unmounted");
  });
  onErrorCaptured(() => {
    console.log('子组件抛出了错误！！')
  });
  function changeNumber() {
    number.value = 400;
    nextTick(()=>{
      const numberText = document.querySelector(".number-text");
    console.log('获取dom更新后的值',numberText.innerText) // 这样子获取到的还是原来的值，因为还没有更新到dom
    });
  }

  
</script>